<template>
    <div class="page-wrap page-wrap-ql">
        <div class="page-cont">
            <div style="padding: 24px">
                <a-table rowKey="id" size="small" :loading="loading" :columns="tableColumns" :data-source="list" :pagination="false">
                    <template #texingTree="{ record }">
                        <CheckOutlined class="success-color" v-if="record.createdTree" />
                        <CloseOutlined class="error-color" v-else />
                    </template>
                    <template #action="{ record }">
                        <flexbox v-if="record.createdTree">
                            <a @click="handleCreate(record)">编辑</a>
                            <a-divider type="vertical" />
                            <a @click="handleOpenHistoryModal(record)">操作历史</a>
                        </flexbox>
                        <a @click="handleCreate(record)" v-else>新建</a>
                    </template>
                </a-table>
            </div>
        </div>
        <HistoryRecordModal ref="HistoryRecordModalRef" />
    </div>
</template>

<script lang="ts">
import api from '@/api';
import HistoryRecordModal from '@/views/productAnalysis/texingTree/components/HistoryRecordModal.vue';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue/es';
import { defineComponent, ref, unref, reactive, toRefs } from 'vue';
export default defineComponent({
    components: {
        CheckOutlined,
        CloseOutlined,
        HistoryRecordModal
    },
    setup() {
        const HistoryRecordModalRef = ref<any>();
        const router = useRouter();
        const tableColumns = [
            {
                title: '产品',
                dataIndex: 'productCatalogName'
            },
            {
                title: '子产品',
                dataIndex: 'subProductCatalogName'
            },
            {
                title: '特性树',
                dataIndex: 'texingTree',
                align: 'center',
                width: 100,
                slots: { customRender: 'texingTree' }
            },
            {
                title: '操作',
                key: 'action',
                width: 200,
                slots: { customRender: 'action' }
            }
        ];

        const state = reactive<any>({
            loading: false,
            list: []
        });
        const handleCreate = (record) => {
            const catalogCode = record.subProductCatalogCode || record.productCatalogCode;
            router.push({
                path: '/productAnalysis/texingTree/Detail',
                query: {
                    productCatalogName: record.productCatalogName,
                    subProductCatalogName: record.subProductCatalogName,
                    catalogCode
                }
            });
        };
        const handleOpenHistoryModal = (record) => {
            const catalogCode = record.subProductCatalogCode || record.productCatalogCode;
            unref(HistoryRecordModalRef).open(catalogCode);
        };
        const getList = async () => {
            state.loading = true;
            const { success, moule, errorMsg } = await api.texingTreeModel.getManagePBIList();
            if (success) {
                state.list = moule.map((item, index) => ({
                    ...item,
                    id: index
                }));
            } else {
                message.error(errorMsg);
            }
            state.loading = false;
        };
        getList();
        return {
            HistoryRecordModalRef,
            tableColumns,
            ...toRefs(state),
            handleCreate,
            handleOpenHistoryModal
        };
    }
});
</script>

<style scoped lang="less">
.page-wrap {
    height: 100%;
    position: relative;
    .page-cont {
        background: #fff;
        .btn-group {
            margin: 24px 0;
            button + button {
                margin-left: 8px;
            }
        }
    }
}
.desc-content {
    img {
        max-width: 400px;
        max-height: 400px;
    }
}
</style>